<template>
  <view class="manage-activity-item">
    <view class="activity-content" @click="toDetails">
      <view class="avtivity-img">
        <TImage
          :src="item.coverUrl"
          width="240rpx"
          height="180rpx"
          border-radius="16rpx"
          error-img-type="person"
        />
        <view class="status-tag-box">
          <view
            v-if="statusText"
            class="status-tag"
            :style="{
              background: statusText.backgroundColor,
              color: statusText.color,
            }"
          >
            {{ statusText.text }}
          </view>
          <view v-if="importType == 'manage' && item.display" class="status-hide">隐藏</view>
        </view>
      </view>
      <view class="activity-info">
        <text class="activity-title text-overflow-2">{{ item.title }}</text>
        <view v-if="importType === 'query'" class="icon-str">
          <text class="ali-icon icon-zhuangtai icon-size"></text>
          <text>{{ myActivityStatusEnumText }}</text>
        </view>
        <text v-if="importType === 'manage'" class="activity-statistics">
          已报名 {{ item.passedNum }}
          <template v-if="item.enrollRestrict">/{{ item.maxNum }}</template>
        </text>
        <view class="icon-str">
          <text class="ali-icon icon-shijian icon-size"></text>
          <text>{{ formatToDateTime(item.startTime, 'MM月DD日 HH:mm') }}</text>
        </view>

        <view v-if="item.addressName" class="icon-str">
          <text class="ali-icon icon-weizhi icon-size"></text>
          <text>{{ item.addressName }}</text>
        </view>
      </view>
    </view>
    <view class="activity-opration" v-if="showBtns">
      <ActivityBtnsGroup
        :import-type="importType"
        :item="item"
        @manage="emit('manage')"
        @share="emit('share')"
        @arrange="emit('arrange')"
        @certificate="emit('certificate', item)"
      ></ActivityBtnsGroup>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navigateTo } from '@/router';
  import { computed, type PropType } from 'vue';
  import type { IActivityListResData } from '@/api/activity/types';
  import TImage from '@/components/TImage/index.vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import ActivityBtnsGroup from './ActivityBtnsGroup.vue';
  import {
    ActivityStatusEnum,
    ApprovalStatusEnum,
    PublishStatusEnum,
  } from '@/enums/activityStatusEnum';

  const props = defineProps({
    importType: {
      type: String as PropType<'manage' | 'query'>,
      default: '',
    },
    item: {
      type: Object as PropType<IActivityListResData>,
      required: true,
    },
  });
  const emit = defineEmits(['refresh', 'manage', 'share', 'arrange', 'certificate']);

  const showBtns = computed(() => {
    if (props.importType === 'manage') return true;
    return [ApprovalStatusEnum.WAITPARTICIPATEIN, ApprovalStatusEnum.PASSED].includes(
      props.item.register?.approvalStatus as ApprovalStatusEnum,
    );
  });

  function toDetails() {
    const { id } = props.item;
    if (
      props.importType === 'manage' &&
      ![
        ActivityStatusEnum.REGISTRATION_UNPLAYED,
        ActivityStatusEnum.REGISTRATION_UNDERWAY,
        ActivityStatusEnum.REGISTRATION_END,
        ActivityStatusEnum.START,
      ].includes(props.item.activityStatus)
    ) {
      navigateTo({
        name: 'activityDetailsPreview',
        options: { id },
      });
      return;
    }
    navigateTo({
      name: 'activityDetails',
      options: { id, refresh: () => emit('refresh') },
    });
  }

  const statusText = computed(() => {
    if (props.importType === 'manage') return activityStatusEnumText.value;
    return approvalStatusEnumText.value;
  });

  /**活动结束 */
  const activityFinish = computed(() => {
    return (
      [
        ActivityStatusEnum.END,
        ActivityStatusEnum.CANCEL,
        ActivityStatusEnum.UNDERREVIEW,
        ActivityStatusEnum.AUDITFAILURE,
      ].includes(props.item.activityStatus) ||
      props.item.publishStatus === PublishStatusEnum.OFF_SHELF
    );
  });

  /**我的活动--报名状态 */
  const approvalStatusEnumText = computed(() => {
    if (activityFinish.value) {
      return {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '已结束',
      };
    }

    if (!props.item.register?.approvalStatus) return;
    return {
      [ApprovalStatusEnum.UNDERREVIEW]: {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '审核中',
      },
      [ApprovalStatusEnum.REJECT]: {
        backgroundColor: '#EA5E0E',
        color: '#FFFFFF',
        text: '被驳回',
      },
      [ApprovalStatusEnum.PASSED]: {},
      [ApprovalStatusEnum.CANCELING]: {},

      [ApprovalStatusEnum.NOTPASS]: {
        backgroundColor: '#2878FF',
        color: '#FFFFFF',
        text: '未通过',
      },
      [ApprovalStatusEnum.WAITPARTICIPATEIN]: {
        backgroundColor: '#2878FF',
        color: '#FFFFFF',
        text: '待参加',
      },
      [ApprovalStatusEnum.CANCEL]: {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '取消报名',
      },
    }[props.item.register?.approvalStatus];
  });

  /**我的活动-活动状态 */
  const myActivityStatusEnumText = computed(() => {
    return {
      [ActivityStatusEnum.REGISTRATION_UNPLAYED]: '活动发布',
      [ActivityStatusEnum.REGISTRATION_UNDERWAY]: '报名进行中',
      [ActivityStatusEnum.REGISTRATION_END]: '报名结束',
      [ActivityStatusEnum.START]: '活动进行中',
      [ActivityStatusEnum.END]: '活动结束',
      [ActivityStatusEnum.CANCEL]: '活动取消',
      [ActivityStatusEnum.UNDERREVIEW]: '活动审核中',
      [ActivityStatusEnum.AUDITFAILURE]: '活动审核失败',
      [ActivityStatusEnum.REGISTRATION_NOTSTARTED]: '活动报名未开始',
    }[props.item.activityStatus];
  });

  /**活动管理--活动显示状态 */
  const activityStatusEnumText = computed(() => {
    /**先验证活动发布状态 */
    if (props.item.publishStatus === PublishStatusEnum.OFF_SHELF) {
      return {
        backgroundColor: '#F2F3F5',
        color: '#333333',
        text: '已下架',
        textDetail: '活动已下架',
      };
    } else if (props.item.publishStatus === PublishStatusEnum.NO_PUBLISH) {
      return {
        backgroundColor: '#D0F7FF',
        color: '#2878FF',
        text: '未发布',
        textDetail: '活动未发布',
      };
    }

    /**再看活动状态 */
    const map = new Map([
      [
        [
          ActivityStatusEnum.REGISTRATION_UNPLAYED,
          ActivityStatusEnum.START,
          ActivityStatusEnum.REGISTRATION_UNDERWAY,
          ActivityStatusEnum.REGISTRATION_END,
        ],
        {
          backgroundColor: '#2878FF',
          color: '#FFFFFF',
          text: '进行中',
          textDetail: '活动进行中',
        },
      ],
      [
        [ActivityStatusEnum.END, ActivityStatusEnum.CANCEL],
        {
          backgroundColor: '#F2F3F5',
          color: '#333333',
          text: '已结束',
          textDetail: '活动已结束',
        },
      ],
    ]);
    for (const [key, value] of map.entries()) {
      if (key.includes(props.item.activityStatus)) {
        return value;
      }
    }
  });
</script>

<style lang="scss" scoped>
  .manage-activity-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx;

    .activity-content {
      display: flex;

      gap: 24rpx;
      .avtivity-img {
        width: 240rpx;
        flex-shrink: 0;
        position: relative;
        .status-tag-box {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          gap: 16rpx;
          .status-tag {
            padding: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx 0 8rpx 8rpx;
            box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
            font-size: 28rpx;
            letter-spacing: 2rpx;
          }
          .status-hide {
            width: 88rpx;
            height: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px 0px 8rpx 8rpx;
            background: rgba(0, 0, 0, 0.7);
            box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
            color: #fff;
            font-size: 28rpx;
            line-height: 40rpx;
            letter-spacing: 2rpx;
          }
        }
      }

      .activity-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16rpx;
        .activity-title {
          font-size: 28rpx;
        }

        .icon-str {
          display: flex;
          gap: 16rpx;
          color: #ccccc8;
          font-size: 28rpx;
          line-height: 32rpx;
          .icon-size {
            font-size: 32rpx;
          }
        }
        .activity-statistics {
          display: inline-block;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          background-color: #f2f3f5;
          color: #999996;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }
    .activity-opration {
      box-shadow: 0px 1px 0px 0px #ebedf0 inset;
      padding-top: 24rpx;
      margin-top: 16rpx;
    }
  }
</style>
